import QtQuick 1.1
//import com.nokia.symbian 1.1
import com.nokia.meego 1.0

Item {
    id: viewHeader
    width: parent.width
    height: headerBackground.height
    property alias content: titleBar.children
    property alias pressed: mouseArea.pressed
    property Style platformStyle: ViewHeaderStyle {}
    property alias clickable: mouseArea.enabled

    property alias titleText: title.text
    property alias subtitleText: subtitle.text
    property alias iconSource: image.source

    signal clicked

    BorderImage {
        id: headerBackground
        border {
            left: platformStyle.headerBackgroundMarginLeft
            right: platformStyle.headerBackgroundMarginRight
            top: platformStyle.headerBackgroundMarginTop
            bottom: platformStyle.headerBackgroundMarginBottom
        }
        source: pressed ? platformStyle.headerBackgroundPressed : platformStyle.headerBackground
        width: parent.width
        height: (screen.currentOrientation === Screen.Portrait || screen.currentOrientation === Screen.PortraitInverted) ? visual.headerHeightPortrait : visual.headerHeightLandscape
    }

    Item {
        id: titleBar
        anchors.fill: parent
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: platformStyle.margin
        anchors.rightMargin: platformStyle.margin

        Item {
            anchors.fill: parent
            Column {
                spacing: (screen.currentOrientation === Screen.Portrait || screen.currentOrientation === Screen.PortraitInverted) ? 0 : -5
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width - image.width

                Text {
                    id: title
                    width: parent.width
                    elide: Text.ElideRight
                    font.pixelSize: visual.fontXlarge
                    color: visual.colorInvertedForeground
                }
                Text {
                    id: subtitle
                    width: parent.width
                    elide: Text.ElideRight
                    font.pixelSize: visual.fontSmall
                    color: visual.colorInvertedForeground
                    visible: text.length
                }
            }
            Image {
                id: image
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
            }
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    Component.onCompleted: mouseArea.clicked.connect(clicked)
}
